<template>
  <div class="video_vue">
    <section>
      <header class="header">
        <ul>
          <li v-for="(headerTab,index) in headerTabs" @click="tabIndex = index"
          :class="{active:tabIndex == index}">{{headerTab.headerTabData}}</li>
        </ul>
      </header>
      <main>
        <section v-show="tabIndex==0">
            <div class="swiper-container banners">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="m in bans">
                    <img :src="m.ban">
                  </div>
                </div>
                <div class="swiper-pagination"></div>
                <!-- 如果需要滚动条 -->
          </div>
          <h3>{{hotVideoTips}}</h3>
          <ul class="hotTitle">
            <li v-for="hotTitle in hotTitles">{{hotTitle.hotTitle}}</li>
          </ul>
          <h3>{{videoBySeclected}}</h3>
          <div class="ban" v-for="img in imge">
            <img :src="img.srcs" alt="">
          </div>
        </section>
        <section v-show="tabIndex==1" class="alive">
          <p><i class="fa fa-camera-retro fa-1x"></i></p>
          <p><i class="fa fa-camera-retro fa-2x"></i></p>
          <p><i class="fa fa-camera-retro fa-3x"></i></p>
          <p><i class="fa fa-camera-retro fa-4x"></i></p>
          <p><i class="fa fa-camera-retro fa-5x"></i></p>
          <p>敬请期待</p>
        </section>
      </main>  
      <footer></footer>
    </section>  
  </div>
</template>

<script>
import '../../../static/js/swiper.jquery.min.js';
  export default {
    name: 'video_vue',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        headerTabs: [
          {headerTabData:"视频"},
          {headerTabData:"直播"}
          ],
        tabIndex: 0 ,
        bans:[
          {ban:"../../../static/img/y_chicken.jpg",path:'indeOut'},
          {ban:"../../../static/img/y_chicken.jpg",path:'indeOut'},
          {ban:"../../../static/img/c-banner.png",path:'indeOut'},
        ],
        hotTitles:[
          {hotTitle:"芝士"},
          {hotTitle:"香脆"},
          {hotTitle:"快手"},
          {hotTitle:"清爽"},
          {hotTitle:"健康"},
          {hotTitle:"简单"},
          {hotTitle:"面包"},
          {hotTitle:"奶油"},
          {hotTitle:"松饼"},
          {hotTitle:"牛肉"},
          {hotTitle:"甜品"},
          {hotTitle:"早餐"}
        ],
        lists:[
          {urls:"../../../static/img/tuijian_03.png",font:"银河系吃货"},
          {urls:"../../../static/img/tuijian_05.png",font:"无人岛先生"},
          {urls:"../../../static/img/tuijian_07.png",font:"一名"},
          {urls:"../../../static/img/tuijian_03.png",font:"银河系吃货"},
          {urls:"../../../static/img/tuijian_05.png",font:"无人岛先生"},
          {urls:"../../../static/img/tuijian_07.png",font:"一名"},
          {urls:"../../../static/img/tuijian_09.png",font:"少女食谱"}
        ],
        hotVideoTips:'热门视频标签',
        videoBySeclected:'精选视频',
        imge:[
          {srcs:"../../../static/img/tuijian_16.png"},
          {srcs:"../../../static/img/tuijian_19.png"},
          {srcs:"../../../static/img/tuijian_21.png"},
          {srcs:"../../../static/img/tuijian_23.png"},
          {srcs:"../../../static/img/tuijian_16.png"},
          {srcs:"../../../static/img/tuijian_19.png"},
          {srcs:"../../../static/img/tuijian_21.png"},
          {srcs:"../../../static/img/tuijian_23.png"},
          
        ]
      }
    },
    mounted () {
         console.log('挂载好了')
          var swiper = new Swiper('.swiper-container',{
            autoplay:1000,
            scrollbarHide:false,
            autoplayDisableOnInteraction:false,
            loop:true,
            pagination:".swiper-pagination"
            //滚动条
             // scrollbar: '.swiper-scrollbar',
          })
         console.log(swiper)
       }

  }
</script>
<style lang="less" scoped>
  @import "../../assets/css/reset.css";
  @import '../../assets/css/swiper.css';
  .px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
  }
  .flexbox{
    display: flex;
  }
  .height(@ht){.px2rem(height,@ht)}
  .line-height(@arg){.px2rem(line-height, @arg);}
  .font-size(@arg){.px2rem(font-size, @arg);}
  .font(@fz,@color){
      .px2rem(font-size,@fz);
      color: @color;
  }
  .border-radius(@arg){.px2rem(border-radius, @arg);}
  .padding-top(@top){.px2rem(padding-top, @top);}
  .padding-right(@right){.px2rem(padding-right, @right);}
  .padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
  .padding-left(@left){.px2rem(padding-left, @left);}
  .margin-top(@top){.px2rem(margin-top, @top);}
  .margin-right(@right){.px2rem(margin-right, @right);}
  .margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
  .margin-left(@left){.px2rem(margin-left, @left);}
  html,body,section{
    width:100%;
    height:100%;
  }
  .header{
    position: fixed;
    top:0;
    left:0;
    z-index: 9999;
    width:100%;
    .height(75);
    background: #f5f5f5;
    ul{
      display: flex;
      justify-content:space-around;
      width:100%;
      li{
        width:18%;
        .height(70);
        text-align: center;
        .line-height(75);
      }
      .active{
          border-bottom: 5px solid #000;
        }
    }
  }
    section{
      .margin-top(75);
      background:#f0f0f0;
        .banners{
          width:100%;
          .swiper-wrapper{
            img{
              width:100%;
              .height(460);
            }
          }
        }
        .swiper-pagination{
          position: absolute;
          top:5%;
          left:42%;
        }
      .hotTitle{
        display:flex;
        .px2rem(width, 750);
        justify-content:space-around;
        flex-wrap:wrap;
        li{
          padding: 3% 10%;
          margin: 1% 1%;
          flex:1;
          text-align:center;
          .line-height(50);
          .px2rem(height, 50);
          background:#fff;
          border:1px solid #c2c2c0;
          .px2rem(border-radius, 3);
          .px2rem(font-size, 23);
        }
      }
      h3{
        border-left:10px solid #000;
        .height(43);
        .line-height(43);
        .px2rem(padding-left,30);
      }
      .ban{
      text-align: center;
      img{
      width:90%;
         .height(450);
      }
    }
    .alive{
      width:100%;
      background:#f0f0f0;
      .height(1255);
      margin:0 auto;
      text-align: center;
    }
  }
  .foot{
    position: fixed;
    width:100%;
    bottom:0;
    background: #fff;
    border: 1px solid #ccc;
      .flexbox;
      .height(93);
      text-align: center;
      align-items: center;
      li{
        width:33%;
        .height(83);
        text-align: center;
        img{
          .px2rem(width,70);
          .height(55);
        }
      }
  }
</style>
